import React, { useState } from 'react'
import "./Fill.less"
interface Iprops {
  data: IQuesData
}
export default function Fill(props: Iprops) {
  let [val, setVal] = useState("")
  let [bool, setBool] = useState(false)
  let [answer, setAnswer] = useState("")
  let { data } = props
  return (
    <div className='fill'>
      <div className="top">
        <div className='type'>编程</div>
        <div className='question'>{data.title}</div>
      </div>
      <div className="option">
        <textarea value={val} onChange={(v) => {
          setVal(v.target.value)
        }} name="" id="" cols={40} rows={10}></textarea>
      </div>
      <button onClick={() => {
        //判断不能为空
        setAnswer(data.answer)
        setBool(true)
        setVal("")
      }}>提交</button>

      <div style={{ display: bool ? "block" : "none" }} >
        <h3>参考答案：</h3>
        <div dangerouslySetInnerHTML={{ __html: answer }}>
          {/* {data.answer} */}
        </div>
      </div>

    </div>
  )
}
